<template>
  <div class="role-config">
    <el-page-header content="权限配置" @back="$emit('hide')"> </el-page-header>
    <el-divider class="my-4" />
    <div v-loading="loading" class="tree-wrapper">
      <el-tree
        ref="tree"
        :data="permissions"
        show-checkbox
        default-expand-all
        node-key="menuId"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <el-divider class="my-4" />
    <el-row type="flex" align="center">
      <el-button size="small" icon="el-icon-back" @click="$emit('hide')">返回</el-button>
      <el-button type="primary" size="small" icon="el-icon-check" :loading="submitting" @click="onSubmitClick">
        保存
      </el-button>
    </el-row>
  </div>
</template>
<script>
import { requestPermissionTree, requestRolePermissionList, requestRolePermissionAssign } from '@/api/system/role'

// 树结构转化，避免一些不必要的问题
const NODES_MAP = (item) => {
  const ret = { ...item }

  ret.id = item.code
  if (ret.children) {
    ret.children = ret.children.map(NODES_MAP)
  }

  return ret
}

export default {
  name: 'RoleConfig',
  props: {
    roleId: { type: String, default: '' },
  },
  data() {
    return {
      loading: false,
      submitting: false,
      permissions: [],
      defaultProps: {
        children: 'children',
        label: 'title',
      },
    }
  },
  created() {
    this.loadPermissionTree()
  },
  methods: {
    async loadPermissionTree() {
      try {
        this.loading = true
        const { success, data } = await requestPermissionTree({})
        if (success) {
          this.permissions = data
          this.loadRolePermissionList()
        } else {
          this.permissions = []
        }
      } catch (error) {
        console.log(error)
        this.permissions = []
      }
      this.loading = false
    },
    async loadRolePermissionList() {
      try {
        const { success, data } = await requestRolePermissionList({
          roleId: this.roleId,
        })
        if (success) {
          const keys = data.map((item) => '' + item.menuId)
          this.$refs.tree.setCheckedKeys(keys)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async onSubmitClick() {
      try {
        this.submitting = true

        const nodes = this.$refs.tree.getCheckedNodes(false, true)
        console.log(nodes)
        const permitIdList = (nodes || []).map((item) => ({
          hasChildren: !!item.children,
          menuId: parseInt(item.menuId),
        }))

        const { success } = await requestRolePermissionAssign({
          roleId: this.roleId,
          menuIds: permitIdList,
        })
        if (success) {
          this.$message.success('权限分配完成')
          this.$emit('hide')
        } else {
          this.$message.error('权限分配失败，请稍后重试')
        }
      } catch (error) {
        this.$message.error('权限分配失败，请稍后重试')
      }
      this.submitting = false
    },
  },
}
</script>
<style lang="scss" scoped>
.role-config {
  width: 100%;
  .tree-wrapper {
    min-height: 300px;
    height: calc(100vh - 350px);
    overflow-y: auto;
  }
}
</style>
